<template>
	<view class="page">
		<!-- 状态栏 app端适配，非app端无视-->
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" style="background-color: #FFFFFF;"></view>
		<!-- #endif -->
		
	    <!-- 自定义导航栏 -->
		<view class="tarbardiv">
		   <view class="tarbar">
		   	<view class="tabbarview" :style="{height:heightbar.allHeight+'px'}"></view>
		   	<view class="nav_top" :style="{height:heightbar.allHeight+'px'}">
		   		<view class="status-bar" :style="{height:heightbar.statusBarHeight+'px'}"></view>
		   		<view class="minetarbar" :style="{height:heightbar.titleBarHeight+'px'}">
		   			<view class="imgsz"><image src="/static/icon/left.png"></image></view>
		   			<view class="title">这是是标题</view>
		   			<view class="imgsz">
						<!-- 此view占位，宽度左右一样，让标题方便居中显示 -->
					</view>
		   		</view>
		   	</view>
		   </view>
		</view>
		 <!-- 自定义导航栏 -->
		
	</view>
</template>

<script>
	var app = getApp()
	export default {
	    data() {
	        return {
				heightbar: {
					allHeight: 0
				}, //获取的状态栏高度对象
	        }
	    },
		onLoad(options){
			var _this = this
			this.isBarHeight999().then(isTemp => {
				// console.log(isTemp)
				_this.heightbar = isTemp;
			});
		},
	    methods: {
			
	    },
	}
</script>

<style lang="scss" scoped>
	.tarbardiv{
		width: 100%;
		position: relative;
		left: 0;
		top: 0;
		background-color: #FFFFFF;
		.nav_top {
			width: 100%;
			position: fixed;
			z-index: 888;
			left: 0;
			top: 0;
			display: flex;
			flex-direction: column;
			background-color: #FFFFFF;
			.minetarbar{
				width: 710rpx;
				padding: 0 20rpx;
				display: flex;
				align-items: center;
				align-content: center;
				justify-content: space-between;
			}
		}
		.tarbar{
			width: 710rpx;
			padding: 0 20rpx;
			// height: 88rpx;
			position: relative;
			top: 0;
			left: 0;
			z-index: 888;
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: space-between;
			.imgsz{
				width: 18rpx;
				height: 35rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title{
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
				font-size:32rpx;
				font-family:PingFangSC;
				font-weight:500;
				color: #101010;
			}
			.imgmsg{
				width: 35rpx;
				height: 35rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
